import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)

export default new Vuex.Store({
    // State： vuex 管理的状态对象，存储数据，可以理解为store的data()
    state: {
        userName: 'Jack',
        token:'',// 用于后期用户认证后端返回的token值
    },

    // Getter：state 中派生出一些状态。相当于store的computed()。this.$store.getters.xxx访问
    getters: {
        fullName: (state) => {
            return state.userName + "Chan"
        },
        token:(state)=>{
            return state.token
        }
    },

    // Mutation：包含多个直接更新 state 的方法。其他组件调用Mutation的方法this.$store.commit('xxx')
    mutations: {
        SET_NAME: (state, userName) => {
            state.userName = userName
        },
        SET_TOKEN:(state,token)=>{
            state.token = token
        }
    },

    // Action: 类似于 mutation，提交的是 mutation,可以包含任意异步操作。其他组件调用Action方法需使用this.$store.dispatch('xxx')
    actions: {      // 调用mutation提交操作   在vue文件中想要改变 state 中的数据 必须先调用actions的 方法
        // actions 方法中 会提交给 mutations. 具体commit给相关的mutations函数
        updateUserName({commit}, newName) {
            commit("SET_NAME", newName)
        },
        // 可以加入异步操作代码，发起Ajax请求
        // 发起登录请求
        login({commit},userInfo){
            // 进行登录验证
            // eslint-disable-next-line no-unused-vars
            const {username,password} = userInfo
            commit('SET_NAME',username);
            commit('SET_TOKEN','admin_token')
        }

    },
    // Module: store的模块化，每个模块拥有自己的 state、mutation、action、getter
    modules: {}
})
